<template>
    <view class="tab-box">
        <view class="tabs" :class="nobg">
            <view
                v-for="(tab, index) in tabs"
                class="tab-item"
                :class="tabIndex == index && 'active'"
                @click="clickTab(tab, index)"
                :key="index">
                <text class="tab-item-text">{{ tab.title }}</text>
                <view class="line"></view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: ["tabIndex", "tabs", "nobg"],
    data() {
        return {}
    },
    methods: {
        clickTab(item, index) {
            this.$emit("clickTab", index)
        },
    },
}
</script>

<style lang="scss">
.tab-box {
    overflow-x: auto;
    .tabs {
        display: flex;
        padding: 10rpx 10rpx 0;
        background: $color-white;
        flex-wrap: nowrap;
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-grow: 1;
            flex-shrink: 0;
            color: grey;
            font-size: $app-tab-text-size;
            font-weight: 500;
            height: 78rpx;
            box-sizing: border-box;
            position: relative;

            .tab-item-text {
                display: flex;
                flex-grow: 1;
                flex-shrink: 0;
                // min-width: 100rpx;
                // width: 200rpx;
                height: 70rpx;
                align-items: center;
                justify-content: center;
                padding: 0 10rpx 4rpx;
                font-weight: 400;
                font-size: $font-size-30;
                font-weight: 700;
            }

            .line {
                // position: absolute;
                width: 50rpx;
                height: 8rpx;
                border-radius: 20rpx;
                background: rgba(0, 0, 0, 0);
            }

            &.active {
                .tab-item-text {
                    color: $app-color-main;
                    font-weight: 700;
                    // border-bottom: 8rpx solid $app-color-main;
                }

                .line {
                    border-radius: 20rpx;
                    background: $app-color-main;
                }
            }
        }
    }
    .nobg {
        background: none;
    }
}
</style>
